<!-- 商户申请审核 -->
<template>
  <div class="app-container">
    <div class="search-bar">
      <div class="flex gap-5">
        <div class="flex flex-wrap gap-2">
          <el-form-item prop="keyword" label="关键字">
            <el-input
              v-model="queryParams.keyword"
              placeholder="小区"
              clearable
              @keyup.enter="initList"
            />
          </el-form-item>
          <el-form-item label="预算(元)" prop="name">
            <el-input
              v-model="queryParams.budgetMin"
              placeholder="最少预算"
              type="number"
              style="width: 120px"
            />
            <span style="margin: 0 10px">-</span>
            <el-input
              v-model="queryParams.budgetMax"
              placeholder="最多预算"
              type="number"
              style="width: 120px"
            />
          </el-form-item>
          <!-- <el-form-item label="空间" prop="name">
            <el-select
              v-model="queryParams.space"
              placeholder="请选择"
              :multiple="true"
              style="width: 200px"
              collapse-tags
              collapse-tags-tooltip
            >
              <el-option v-for="item in RequirementSpace" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item> -->
          <el-form-item label="品类" prop="name" style="width: 200px">
            <el-select
              v-model="categoryTypeId"
              placeholder="请选择"
              multiple
              collapse-tags
              collapse-tags-tooltip
            >
              <el-option
                v-for="item in categoryList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="dateRange" label="发布时间">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :shortcuts="shortcuts"
              @change="handleDateChange"
            />
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="primary" @click.stop="initList">
            <template #icon>
              <Search />
            </template>
            搜索
          </el-button>
          <el-button @click.stop="handleResetQuery">
            <template #icon>
              <Refresh />
            </template>
            重置
          </el-button>
        </el-form-item>
      </div>
    </div>
    <!-- <el-tabs v-model="queryParams.type" class="enter-tabs" @tab-click="handleTabClick">
      <el-tab-pane label="装修需求" :name="2"></el-tab-pane>
      <el-tab-pane label="材料需求" :name="1"></el-tab-pane>
    </el-tabs> -->
    <BasePageTable
      :total="total"
      :loading="loading"
      :page-num="queryParams.pageNum"
      :page-size="queryParams.pageSize"
      :table-data="tableData"
      :table-columns-data="tableColumnsData"
      @handleQuery="handleQuery"
    >
      <template #handle="scope">
        <el-button
          link
          type="primary"
          :disabled="scope.row.greetStatus != 0"
          @click="handleGreet(scope.row)"
        >
          打招呼
        </el-button>
        <el-button link type="primary" @click="lookDetail(scope.row)">查看</el-button>
      </template>
    </BasePageTable>
    <greet-form ref="greetFormRef"></greet-form>
    <detail ref="detailRef"></detail>
  </div>
</template>
<script setup>
import OpportunityAPI from "@/api/opportunity";
import UserAPI from "@/api/system/user";
import GreetForm from "@/views/opportunity/components/greet-form.vue";
import detail from "./components/detail.vue";
import { materialTableColumnsData, designerTableColumnsData } from "./opportunity";
import { useUserStore } from "@/store/modules/user";
import { useDictStore } from "@/store/modules/dict";

const userStore = useUserStore();
const userType = userStore.userInfo.userType;
const dictStore = useDictStore();
const RequirementSpace = dictStore.getDictionary("RequirementSpace");
const loading = ref(false);
const greetFormRef = ref();
const detailRef = ref();
const shortcuts = [
  {
    text: "今天",
    value: () => {
      const start = new Date();
      start.setHours(0, 0, 0, 0);
      const end = new Date();
      end.setHours(23, 59, 59, 999);
      return [start, end];
    },
  },
  {
    text: "近三天",
    value: () => {
      const end = new Date();
      end.setHours(23, 59, 59, 999);
      const start = new Date();
      start.setDate(start.getDate() - 2);
      start.setHours(0, 0, 0, 0);
      return [start, end];
    },
  },
  {
    text: "近一周",
    value: () => {
      const end = new Date();
      end.setHours(23, 59, 59, 999);
      const start = new Date();
      start.setDate(start.getDate() - 6);
      start.setHours(0, 0, 0, 0);
      return [start, end];
    },
  },
];
const tableColumnsData = ref([]);

const total = ref(0);
const categoryTypeId = ref([]);
const queryParams = ref({
  categoryTypeIds: "",
  pageNum: 1,
  pageSize: 10,
  type: 1,
  keyword: "",
  startTime: "",
  endTime: "",
  // space: [],
  budgetMax: undefined,
  budgetMin: undefined,
});
const dateRange = ref();

const handleDateChange = (date) => {
  if (date) {
    queryParams.value.startTime = date[0];
    queryParams.value.endTime = date[1];
  } else {
    queryParams.value.startTime = "";
    queryParams.value.endTime = "";
  }
};

const handleTabClick = () => {
  if (queryParams.value.type == 1) {
    tableColumnsData.value = materialTableColumnsData;
  } else {
    tableColumnsData.value = designerTableColumnsData;
  }
};
const handleResetQuery = () => {
  queryParams.value.pageNum = 1;
  queryParams.value.pageSize = 10;
  dateRange.value = ref();
  queryParams.value.keyword = "";
  queryParams.value.startTime = "";
  queryParams.value.endTime = "";
  categoryTypeId.value = [];
  queryParams.value.space = [];
  queryParams.value.budgetMax = undefined;
  queryParams.value.budgetMin = undefined;
  initList();
};
const tableData = ref([]);
const categoryList = ref([]);
const handleGreet = async (row) => {
  greetFormRef.value.showModal(row);
};

const lookDetail = async (row) => {
  detailRef.value.showModal(row);
};

/**
 * 请求相关
 *
 */
//获取机会列表
const getOpportunityList = async () => {
  try {
    loading.value = true;
    queryParams.value.type = userType == "MC02" ? 1 : 2;
    handleTabClick();
    queryParams.value.categoryTypeIds = categoryTypeId.value.join(",");
    const res = await OpportunityAPI.getDesignerOpportunityList(queryParams.value);
    tableData.value = res.data;
    total.value = res.total;
  } catch (err) {
    console.log(err);
  } finally {
    loading.value = false;
  }
};

function initList() {
  queryParams.value.pageNum = 1;
  getOpportunityList();
}
function handleQuery(val) {
  queryParams.value.pageNum = val.pageNum;
  queryParams.value.pageSize = val.pageSize;
  getOpportunityList();
}

async function getUserInfo() {
  const data = await UserAPI.getProfile();
  if (data.data.merchantCompany?.categoryIds && data.data?.merchantCompany?.categoryNames) {
    const categoryId = data.data.merchantCompany.categoryIds.split(",").reduce((acc, curr) => {
      acc.push(Number(curr));
      return acc;
    }, []);
    const categoryName = data.data.merchantCompany.categoryNames.split(",");
    for (let i = 0; i < categoryId.length; i++) {
      categoryTypeId.value.push(categoryId[i]);
      categoryList.value.push({ name: categoryName[i], id: categoryId[i] });
    }
  }
}

/**
 * 所有用的上的字典表定义
 * @field 搜索中用到的字段
 * @label 字典表的label
 * @list 每个tag的列表
 */

onMounted(async () => {
  // 配置有商品分类的，需要获取商品分类数据
  await getUserInfo();

  // 获取商品分类数据，并添加到上面所有的列表中，供不同角色使用
  tableColumnsData.value = materialTableColumnsData;
  await getOpportunityList();
});
</script>
<style lang="scss" scoped>
.enter-tabs {
  background-color: #fff;
  padding: 10px 20px;
}
.el-collapse {
  border: 0;
}
</style>
